<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 模块化开发 
        // 重点  

        // vue  node  react 小程序  都是采用模块化开发 
        

        // 模块化开发 就是 
        // 把一个完整的功能 拆分成一个个独立的模块 
        //  一个.js文件就是一个模块 


        // 根据业务的需求 将各个模块整合在一起 



        // 我们在模块化开发的时候 
        //  我们把多个逻辑代码 写在多个js文件中 
        //  每个.js 都是一个独立的文件 是一个独立的模块作用域
        // 在这个文件内 只能使用自己文件中的变量  不能使用别的文件中的  

        // 我们需要使用别的文件中的内容 如何实现?

        // 首先需要 别的文件将数据导出  然后 我们才可以导入  最后才能使用  


        //  导出

        //   一个文件向外暴露一些内容 

        // es6 对于模块化开发的要求
        // script 标签 必须加上 type=module 
        // 页面必须采用 服务器的方式打开  open with live server

        // 语法1:
        //      export default 你要导出的数据;(详见header.js)
        //      注意 一个js文件  只能出现 一次  export default

        // 语法2:
        //      export 定义变量 = 值; (详见footer.js);
        //      一个js文件 可以使用这个语法导出多个  

        //  导入 
        //   导入目标文件的同时   拿到向外暴露的内容
        
        //   语法1: 
        //      import  变量  from '文件';  // 这里的文件是文件的路径
        //      注意 语法1的导入对应语法1的导出  
        //   语法2:
        //      import {导入的内容} from '文件'
        //      注意 语法2的导入对应 语法2的导出 
        // 使用 

        
    </script>
</body>
</html>